<script setup>
// 客户标签页
import { ref, reactive, toRef, onMounted } from 'vue'
import { Search, ArrowDown } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { postTagList, postTagAdd, postTagSync, postTagOrder } from '@/api'
const router = useRouter()
// 客户标签列表页
const tangList = ref([])
const GroupTag = () => {
	postTagList({}).then((res) => {
		tangList.value = res.data
	})
}
GroupTag()

const searchContent = ref('')
// 搜索框内容
const search = () => {
	postTagList({
		name: searchContent.value
	}).then((res) => {
		tangList.value = res.data
		console.log('搜索框内容', tangList.value[index])
		// searchList.push(tangList.value)
		// ruleForm.deleteid.push(ruleForm.rule[index].tag_id)
	})
	console.log('搜索', searchContent)
}
// 重置按钮
const resetForm = () => {
	postTagList({}).then((res) => {
		tangList.value = res.data
	})
}

const dialogDepartmentVisible = ref(false)
const department = ref('全部部门')
const radioLabel = ref('')

const value = ref('')
const isShow = ref('')
const confirm = (event) => {
	console.log(event)
	department.value = event.isTrusted
}
// 显示/不显示
const changeStatus = (index) => {
	// 所有不显示
	tangList.value.map((item) => {
		item.isShow = false
	})
	// 点谁谁显示
	tangList.value[index].isShow = true
}
// 输入获取值
const inputEnter = (item, index) => {
	console.log(item, index)
	if (item.value.replace(/(^\s*)|(\s*$)/g, '') == '') {
		console.log('为空')
	} else {
		postTagAdd({
			group_id: item.group_id,
			tag_name: item.value
		}).then((res) => {
			console.log(tangList.value[index].tag)
			tangList.value[index].tag.push({ tag_id: '', tag_name: item.value })
			console.log('获取到的值', tangList.value[index])
		})
		item.isShow = false
	}
}
// 修改客户标签组
const editGo = (id) => {
	router.push({ path: 'ModifyCustomerLabelGroup', query: { id: id } })
}
// 添加客户标签组
const change = (id) => {
	router.push({ path: 'customerTagGroup', query: { id: id } })
}
// 同步刷新企微标签
const loading = ref(false)
const synchronization = (data) => {
	console.log(data)
	loading.value = true
	console.log('loading', loading.value)
	postTagSync({}).then((res) => {
		ElMessage.success('同步成功')
	})
	loading.value = false
}

//弹窗按钮
const radioChange = (label) => {
	radioLabel.value = label
}
const AddDepartment = () => {
	dialogDepartmentVisible.value = true
}
const addClick = (form) => {
	console.log('sumbit')
	form = ''
	dialogFormVisible.value = false
}
// 上移
const typeUpper = ref('up')
const isLock = ref(false)
const upGo = (index) => {
	console.log(index)
	console.log('测试数据', tangList.value[index].group_id)
	if (index != 0) {
		// postTagSync({
		// 	type: typeUpper.value,
		// 	groupid: tangList.value[index].group_id
		// }).then((res) => {
		// 	console.log(res)
		// 	tangList.value[index] = tangList.value.splice(index - 1, 1, tangList.value[index])[0]
		// })
		postTagOrder({groupId:tangList.value[index].group_id ,type: typeUpper.value}).then(res=>{
			tangList.value[index] = tangList.value.splice(index - 1, 1, tangList.value[index])[0]
		})
	} else {
		isLock.value === true
		// tangList.value.push(tangList.value.shift())
		console.log('限制', isLock.value)
	}
}
// 下移
const typeLower = ref('down')
const downGo = (index) => {
	if (index != tangList.value.length - 1) {
		postTagOrder({
			type: typeLower.value,
			groupId: tangList.value[index].group_id
		}).then((res) => {
			console.log(res)
			tangList.value[index] = tangList.value.splice(index + 1, 1, tangList.value[index])[0]
		})
	} else {
		// tangList.value.unshift(tangList.value.splice(index, 1)[0])
		isLock.value === true
	}
}
</script>
<template>
	<div class="CMtopStyleChildOne">
		<div @click="change">
			<el-button type="primary">添加客户标签组</el-button>
		</div>
		<div @click="synchronization">
			<el-button type="primary" plain>同步企微标签</el-button>
		</div>
	</div>
	<div class="table-operation">
		<div class="table-operation-left">
			<!-- <span class="table-operation-label">可用部门:</span> -->
			<!-- <el-select v-model="selectValue" clearable placeholder="全部" style="width: 200px; margin-right: 15px">
				<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
			</el-select> -->
			<span class="table-operation-label">搜索:</span>
			<el-input
				v-model="searchContent"
				class="w-50 m-2"
				placeholder="可搜索成员"
				
				@keyup.native.enter="search"
				clearable
				style="width: 200px; margin-right: 15px"
			>
			<template #suffix>
				<el-icon class="Search" @click="search"><Search /></el-icon>
				</template>
			</el-input>
		</div>
		<div class="table-operation-right">
			<el-button @click="resetForm(ruleFormRef)">重置</el-button>
		</div>
	</div>
	<!-- 正文 -->
	<div class="public-container">
		<div class="public-header-container">共{{ tangList.length }}个标签组</div>
		<div v-for="(item, index) in tangList" :key="index">
			<div class="centerContentStyleChild2">
				<div style="color: #222222">
					<p style="font-weight: bolder">{{ item.group_name }}</p>
					<p style="margin-top: 17px; color: #666">共{{ item.tag.length }}个标签</p>
				</div>
				<div class="contentChild1">
					<div class="listUpDownEdit">
						<div>可见范围：全部员工可用</div>
						<div class="listUpDownEditChild">
							<div style="margin-right: 10px" @click="upGo(index)" :disable="isLock">
								<i class="iconfont">&#xe61c;</i>上移
							</div>
							<div style="margin-right: 10px" @click="downGo(index)" :disable="isLock">
								<i class="iconfont">&#xe61b;</i>下移
							</div>
							<div @click="editGo(item.group_id, 1)"><i class="iconfont">&#xe8ac;</i>修改</div>
						</div>
					</div>
					<div class="contentTag">
						<!-- 添加按钮 -->
						<div style="margin-right: 11px">
							<el-button @click="changeStatus(index)">
								<el-icon> <Plus /> </el-icon>添加
							</el-button>
						</div>
						<div style="margin-right: 11px">
							<el-input
								:clearable="true"
								@keyup.enter="inputEnter(item, index)"
								v-model="item.value"
								v-show="item.isShow"
							>
							</el-input>
						</div>
						<div>
							<!-- 添加的标签 -->
							<el-tag
								style="margin-left: 11px; margin-bottom: 10px"
								size="large"
								type="info"
								v-for="tag in item.tag"
								:key="tag"
								>{{ tag.tag_name }}
							</el-tag>
						</div>
					</div>
				</div>
			</div>
			<div style="border-bottom: 1px dashed #e8e8e8; margin: 0 20px"></div>
		</div>
	</div>
</template>
<style lang="scss">
@import '../../../style/iconfont.css';
.iconfont {
	font-family: 'iconfont' !important;
	font-size: 16px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.CMtopStyle {
	position: relative;
	display: flex;
	justify-content: flex-start;
	margin: 20px;
	height: 84px;
	line-height: 84px;
	border-radius: 8px;
	background-color: #ffffff;
}

.CMtopStyleChildOne {
	display: flex;
	margin: 20px 20px 0 20px;
	justify-content: space-between;
}

.topStyleChild1 {
	margin-left: 20px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.searchStyle {
	display: flex;
	margin-left: 50px;
}

.searchStyleChild {
	margin-left: 5px;
}

.Child2Style {
	position: relative;
	margin-left: 5px;
	width: 203px;
	height: 32px;
	margin-top: 2px;
	border-radius: 5px;
	border: 1px solid #d9d9d9;
}

.Child2Content {
	position: absolute;
	top: -27px;
	padding-left: 5px;
	font-size: 14px;
	color: #999999;
}

.child2StyleIcon {
	position: absolute;
	right: 8px;
	top: -25px;
}

.ResetStyle {
	position: absolute;
	right: 3%;
}

/* 正文 */
.centerContentStyle {
	position: relative;
	margin: 0 20px 0 20px;
	border-radius: 8px;
	height: 651px;
	background-color: #ffffff;
}

.centerContentStyleChild1 {
	height: 62px;
	line-height: 62px;
	margin: 0 0 0 21px;
	border-bottom: 1px solid #ececec;
	font-size: 16px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: bolder;
	border-bottom: 1px solid #ececec;
}

.centerContentStyleChild2 {
	min-height: 108px;
	margin-left: 20px;
	margin-top: 17px;
	display: flex;
	justify-content: flex-start;
}

.contentChild1 {
	width: 76%;

	margin-left: 76px;
}

.listUpDownEdit {
	display: flex;
	justify-content: space-between;
}

.listUpDownEditChild {
	position: absolute;
	right: 3%;
	display: flex;
	justify-content: space-between;
	color: #1890ff;
}

/* 标签 */
.contentTag {
	display: flex;
	justify-content: flex-start;
	margin-top: 17px;
}

/* 弹窗 */
.dialogStyle {
	display: flex;
	justify-content: space-between;
}
/* table */
.public-container {
	margin: 20px 20px 0 20px;
	background: #fff;
	padding: 20px 0 0 0;
	border-radius: 10px;
	font-size: 14px;
}
.public-header-container {
	margin: 0 20px 20px 20px;
	padding-bottom: 16px;
	font-size: 15px;
	color: #222;
	font-weight: bold;
	border-bottom: 1px solid #ececec;
}
.tableHeader {
	height: 40px;
	font-size: 14px;
	color: #909399;
	background: #f7f9fa;
}
.tableOperation {
	display: flex;
	align-items: center;
	list-style: none;
	padding: 0;
	margin: 0;
}
.tableOperation li {
	font-size: 14px;
	color: #409eff;
	border-right: 1px solid #ebebeb;
	padding: 0 10px;
	height: 14px;
	line-height: 14px;
	cursor: pointer;
}
.tableOperation li:hover {
	color: #a0cfff;
}
.tableOperation li:first-child {
	padding-left: 0;
}
.tableOperation li:last-child {
	border-right: none;
}
/* 功能区 */
.table-operation {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #fff;
	border-radius: 10px;
	padding: 20px;
	margin: 20px 20px 0 20px;
	font-size: 14px;
	color: rgb(89, 89, 89);
}
.table-operation-left {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	font-size: 14px;
	color: rgb(89, 89, 89);
}
.table-operation-right {
	display: flex;
	align-items: center;
	font-size: 14px;
	color: rgb(89, 89, 89);
}
.table-operation-label {
	/* width: 110px; */
	margin-right: 10px;
}
.el-page-header {
  display:none;
}
</style>
